 <?php include 'inc/student_head.php';?>
<style type="text/css">
.layui-container{
     padding:100px;
     background-color: #fafafa;
     margin-top: 20px;
     border-radius: 20px;
     opacity: 0.7;
}
</style>



    <div class="layui-container">

        <div class="layui-row">
            <div class="layui-col-md12" style="margin-top:10px;">
                <blockquote class="layui-elem-quote" style="font-size:18pt;border:1px solid #CCC">
                    <?php echo $this->count['name']; ?>，
                    共<?php echo $this->count['end'] - $this->count['begin'] + 1; ?>题
                </blockquote>

            </div>
            <div class="layui-col-md12">
                <form class="layui-form layui-form-pane" method="post" action=''>

                    <input type="hidden" id='total' name="total" value=<?php echo $this->count['end'] - $this->count['begin'] + 1; ?> />
                    <input type="hidden" name="count_id" value=<?php echo $this->count['id']; ?> />
                    <input type="hidden" id='begin' name="begin" value=<?php echo $this->count['begin']; ?> />

                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label" id='inputCount'>
                        输入答案处
                        </label>
                        <div class="layui-input-block">
                            <textarea class="layui-input layui-textarea" lay-verify="required" lay-vertype="tips" name="answers"   type='text' id='answers' readonly="" placeholder="请单击下面的按钮输入答案" style='letter-spacing: 2px;font-weight: bold;' ></textarea>

                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn layui-btn-normal bb" style="width:100px;height: 62px;font-size:30pt;" type='button'>A</button>
                            <button class="layui-btn layui-btn-normal bb" style="width:100px;height: 62px;font-size:30pt;" type='button'>B</button>
                            <button class="layui-btn layui-btn-normal bb" style="width:100px;height: 62px;font-size:30pt;" type='button'>C</button>
                            <button class="layui-btn layui-btn-normal bb" style="width:100px;height: 62px;font-size:30pt;" type='button'>D</button>
                            <button class="layui-btn layui-btn-danger bd" style="width:100px;height: 62px;font-size:50pt;" type='button'>
                                <i class="layui-icon" style='font-size:30pt'>&#xe65c;</i>
                            </button>

                            &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                            &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                            <button class="layui-btn ok" style="background-color:#05C1AE;width:140px;height: 62px;font-size:18pt;display: none;" lay-filter="do" lay-submit>提交答案</button>
                        </div>
                    </div>

                </form>
            </div>



        </div>
    </div>







<script language="javascript">
    layui.use(['form','element'], function () {
        var form = layui.form,
            $    = layui.$;
        $("#menu_hardCount").addClass('layui-this'); //设置导航当前选中项的样式

        //提交答案按钮
        form.on('submit(do)', function (data) {
            data.begin=<?=$this->count['begin']?>;//记录开始题号
            layer.confirm('系统只记录第一次提交的答案,是否确定提交?', {icon: 3, title:'提示'},function(index){
                $.post('/index/hardCount', data.field, function (r) {
                    layer.alert(r);
                });

                layer.close(index);
            });
            return false;
        });

        //abcd按钮
        $('.bb').click(function(){
            //去除空格
            var answers=$('#answers').val().trim().replace(/\s/g,"");
            //每5个答案插入一个空格
            var i=(answers.length+1)%5;
            if (i==0){
                $('#answers').val($('#answers').val()+$(this).text()+'  ');
            }else{
                $('#answers').val($('#answers').val()+$(this).text());
            }
            inputCount();
        });

        //退格按钮
        $('.bd').click(function(){
            var answers=$('#answers').val().trim();
            $('#answers').val(answers.substring(0,answers.length-1));
            inputCount();
        });

        //计数
        function inputCount(){
            var answers=$('#answers').val().trim().replace(/\s/g,"");
            var current= parseInt($('#begin').val()) + parseInt(answers.length);
            $('#inputCount').html("<a class='y-red'>已输入"+answers.length+'题，即将输入第'+current+'题</a>');
            var total=parseInt($('#total').val());
            //当输入答案个数达到总数时，禁用ABCD输入按钮
            // console.log(total);
            // console.log(answers.length);
            if (answers.length >= total){
                $('.bb').attr('disabled','');
                $('.bb').css({'background-color':'#ccc','cursor':'not-allowed'});
                $('#inputCount').html('<a class="y-red">已输入所有题目的答案</a>');
                $('.ok').css({'display':''});
            }else{
                $('.bb').removeAttr('disabled');
                $('.bb').css({'background-color':'','cursor':''});
                $('.ok').css({'display':'none'});
            }
        }

    }); //End
</script>

 <?php include 'inc/student_foot.php';?>
